<template>
    <div class="container">
        <audio id="music" :autoplay="audioAutoplay" ref="music" loop="loop">
            <source src="http://music.163.com/song/media/outer/url?id=396696.mp3" type="audio/mpeg">
            <!-- <source src="http://music.163.com/song/media/outer/url?id=38592976.mp3" type="audio/mpeg"> -->
            <!-- <source src="http://music.163.com/song/media/outer/url?id=28258464.mp3" type="audio/mpeg"> -->
            <!-- <source src="http://yumao-bucket.oss-cn-zhangjiakou.aliyuncs.com/wechat/Barcelona%20-%20I%20Choose%20You.mp3" type="audio/mpeg"> -->
        </audio>
        <div class="circle">
            <div class="imgs" ref="imgs"></div>
            <div class="share">
                <button id="star"  @click="playMusic">
                  <img class="icon" ref="iconstar" :src="iconUrl"/>
                </button>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "MyAudio",
    props:["audioAutoplay"],
    data() {
      return {
          music:null,
          son:0,
          musicsList:[],
          musicsNameList:[],
          musicImgs:[],
          nextDeg:0,
          deg:0,
          timer:null,
          flag:true,
          iconUrl:'http://yumao-bucket.oss-cn-zhangjiakou.aliyuncs.com/bgimages/zt.png',
          musicArray:[],
          currentMusicIndex:0,
      }
    },
    methods:{
        playMusic() {
            this.$emit('playMusic');
            try{
                let starbg = this.$refs.iconstar
                if (this.music.paused) {
                this.music.play();
                this.iconUrl = "http://yumao-bucket.oss-cn-zhangjiakou.aliyuncs.com/bgimages/zt.png";
                starbg.style.backgroundSize = "99% 99%";
                clearInterval(this.timer)
                this.rotates()
                } else {
                this.music.pause();
                this.iconUrl = "http://yumao-bucket.oss-cn-zhangjiakou.aliyuncs.com/bgimages/actions.png"
                starbg.style.backgroundSize = "99% 99%";
                clearInterval(this.timer)
            }
            }catch(error){
                console.log(error)
            }
        },
        rotates() {
            let that = this
            if (that.nextDeg != 0) {
                that.deg = that.nextDeg
            }
            let imgs = that.$refs.imgs;
            let flag = 1;
            that.timer = setInterval(function() {
            imgs.style.transform = "rotate(" + that.deg + "deg)";
            that.deg += 1;
            if (that.deg > 360) {
                that.deg = 0
            }
            that.nextDeg = that.deg
        },10)
        },
        //播放结束后播放下一首
        playEndedHandler(){          
            if(this.musicArray.length > this.currentMusicIndex){
                this.currentMusicIndex ++
            }else{
                this.currentMusicIndex = 0
            }
            this.music.src = this.musicArray[this.currentMusicIndex]
            this.music.play()
        }
    },
    mounted(){
        this.music = this.$refs.music
        this.rotates();       
        // if(this.music){
        //     this.music.addEventListener('ended', playEndedHandler, false)
        // }   
    },
    destroyed() {
        // if(this.music){
        //     this.music.removeEventListener('ended',playEndedHandler,false)
        // }
    }
}
</script>
<style scoped>
.circle{
    position:absolute;
    top:65px;
    right:0px;
    transform:translate(-50%,-50%);
    width:30px;
    height:30px;
    border-radius:50%;
    }
.circle button{
    width:30px;
    height:30px;
}
.imgs{
        position:absolute;
        height:100%;
        width:100%;
        border-radius:30px;
        background:url("../static/music.png") no-repeat;
        background-size:100%;}
.circle .share{
    position:relative;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
    border-radius:50%;
    z-index:1;
    box-shadow:0 0 0 1px yellow;
    }
button{
    margin:0;
    padding:0;
    border:none;
    outline:none;
    border-radius:50%;
    cursor:pointer;
    background-color:rgba(0,0,0,0);
}
#star{
    position:relative;
}
.icon{
    position: relative;
    width:20px;
    height:20px;
}
</style>